<template>
  <div class="ranklist-wrap bg-wrap">
    <nav-bar :title="title"></nav-bar>
    <div class="ranklist">
      <div class="item toplist">
        <h2 class="title">云音乐特色榜</h2>
        <ul>
          <li v-for="items of toplist" :key="items.name" @click="goList(items.id)">
            <div class="cover">
              <p class="updateFrequency">{{items.updateFrequency}}</p>
              <img :src="items.coverImgUrl">
            </div>
            <div class="song">
              <h2 class="title">{{items.name}}</h2>
              <p
                v-for="(item, index) of items.tracks"
                :key="index"
              >{{index + 1}}.{{item.first}} - {{item.second}}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="item otherlist">
        <h2 class="title">全球媒体榜</h2>
        <ul>
          <li v-for="items of otherlist" :key="items.name" @click="goList(items.id)">
            <div class="cover">
              <p class="updateFrequency">{{items.updateFrequency}}</p>
              <img :src="items.coverImgUrl">
            </div>
            <div class="song">
              <h2 class="title">{{items.name}}</h2>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/Navbar'
export default {
  data () {
    return {
      title: '排行榜',
      toplist: [],
      otherlist: []
    }
  },
  components: {
    NavBar
  },
  methods: {
    // 获取排行榜列表
    async getRankList () {
      let res = await this.$api.getRankList()
      this.toplist = res.list.filter(item => item.ToplistType)
      this.otherlist = res.list.filter(item => !item.ToplistType)
    },
    goList (id) {
      this.$router.push({
        path: '/songlistDetail',
        query: { id: id }
      })
    }
  },
  mounted () {
    this.getRankList()
  }
}
</script>

<style lang="stylus" scoped>
.ranklist-wrap {

  .ranklist {
    padding: 0.3rem;

    .item {
      margin-bottom: 0.6rem;

      .title {
        font-size: 0.36rem;
        color: #FFFFFF;
        margin-bottom: 0.3rem;
      }

      ul {
        li {
          width: 100%;
          display: flex;
          align-items: center;
          margin-top: 0.2rem;

          .cover {
            width: 2.2rem;
            height: 2.2rem;
            position: relative;
            border-radius: 0.1rem 0 0 0.1rem;
            margin-right: 0.25rem;

            img {
              width: 2.2rem;
              height: 2.2rem;
              border-radius: 0.1rem;
            }

            .updateFrequency {
              position: absolute;
              left: 0.2rem;
              bottom: 0.12rem;
              font-size: 0.24rem;
              color: #ffffff;
            }
          }

          .song {
            width: 100%;
            height: 2.2rem;
            flex: 1;
            display: flex;
            justify-content: center;
            flex-direction: column;

            .title {
              font-size: 0.3rem;
              color: #fff;
              margin: 0.2rem 0;
            }

            p {
              color: rgba(255, 255, 255, 0.8);
              font-size: 0.24rem;
              line-height: 1.86;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 90%;
            }
          }
        }
      }
    }

    .otherlist {
      ul {
        margin: 0 -0.1rem;
        li {
          width: 33.33333333%;
          display: inline-block;
          vertical-align: top;
          padding: 0 0.1rem 0rem;
          .song {
            height: auto;
            .title {
              color: rgba(255, 255, 255, 0.8);
              font-size: 0.26rem;
              line-height: 1.6;
              margin: 0.15rem 0 0 0;
            }
          }
        }
      }
    }
  }
}
</style>
